<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="lib/index.min.css">
  <style>
    .demo {
      width: 50%;
      margin: 0 auto;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }

    .demo .du-row {
      margin-bottom: 10px;
    }

    .demo [class*=du-col-] {
      border-radius: 4px;
      padding: 5px 0;
      text-align: center;
    }

  </style>
</head>

<body>

  <h1>栅格</h1>
  <div>du-col-*</div>
  <div class="demo">
    <div class="du-row">
      <div class="du-col-24 bg-gray">24</div>
    </div>
    <div class="du-row">
      <div class="du-col-1 bg-grey">1</div>
      <div class="du-col-23 bg-gray">23</div>
    </div>
    <div class="du-row">
      <div class="du-col-2 bg-grey">2</div>
      <div class="du-col-22 bg-gray">22</div>
    </div>
    <div class="du-row">
      <div class="du-col-3 bg-grey">3</div>
      <div class="du-col-21 bg-gray">21</div>
    </div>
    <div class="du-row">
      <div class="du-col-4 bg-grey">4</div>
      <div class="du-col-20 bg-gray">20</div>
    </div>
    <div class="du-row">
      <div class="du-col-5 bg-grey">5</div>
      <div class="du-col-19 bg-gray">19</div>
    </div>
    <div class="du-row">
      <div class="du-col-6 bg-grey">6</div>
      <div class="du-col-18 bg-gray">18</div>
    </div>
    <div class="du-row">
      <div class="du-col-7 bg-grey">7</div>
      <div class="du-col-17 bg-gray">17</div>
    </div>
    <div class="du-row">
      <div class="du-col-8 bg-grey">8</div>
      <div class="du-col-16 bg-gray">16</div>
    </div>
    <div class="du-row">
      <div class="du-col-9 bg-grey">9</div>
      <div class="du-col-15 bg-gray">15</div>
    </div>
    <div class="du-row">
      <div class="du-col-10 bg-grey">10</div>
      <div class="du-col-14 bg-gray">14</div>
    </div>
    <div class="du-row">
      <div class="du-col-11 bg-grey">11</div>
      <div class="du-col-13 bg-gray">13</div>
    </div>
    <div class="du-row">
      <div class="du-col-12 bg-grey">12</div>
      <div class="du-col-12 bg-gray">12</div>
    </div>
  </div>
  <h1>间隔</h1>
  <div>gutter-xs gutter-sm gutter gutter-lg gutter-xl</div>
  <div class="demo">
    <div class="du-row gutter-xs">
      <div class="du-col-6"><div class="bg-gray">2</div></div>
      <div class="du-col-6"><div class="bg-grey">2</div></div>
      <div class="du-col-6"><div class="bg-grey">2</div></div>
      <div class="du-col-6"><div class="bg-grey">2</div></div>
    </div>
    <div class="du-row gutter-sm">
      <div class="du-col-6"><div class="bg-gray">2</div></div>
      <div class="du-col-6"><div class="bg-grey">2</div></div>
      <div class="du-col-6"><div class="bg-grey">2</div></div>
      <div class="du-col-6"><div class="bg-grey">2</div></div>
    </div>
    <div class="du-row gutter">
      <div class="du-col-6"><div class="bg-gray">2</div></div>
      <div class="du-col-6"><div class="bg-grey">2</div></div>
      <div class="du-col-6"><div class="bg-grey">2</div></div>
      <div class="du-col-6"><div class="bg-grey">2</div></div>
    </div>
    <div class="du-row gutter-lg">
      <div class="du-col-6"><div class="bg-gray">2</div></div>
      <div class="du-col-6"><div class="bg-grey">2</div></div>
      <div class="du-col-6"><div class="bg-grey">2</div></div>
      <div class="du-col-6"><div class="bg-grey">2</div></div>
    </div>
    <div class="du-row gutter-xl">
      <div class="du-col-6"><div class="bg-gray">2</div></div>
      <div class="du-col-6"><div class="bg-grey">2</div></div>
      <div class="du-col-6"><div class="bg-grey">2</div></div>
      <div class="du-col-6"><div class="bg-grey">2</div></div>
    </div>
  </div>

  <h1>偏移 </h1>
  <div>.du-col-offset-* .du-col-{响应尺寸}-offset-*</div>
  <div class="demo">
    <div class="du-row">
      <div class="du-col-6 bg-gray"> </div>
      <div class="du-col-6 du-col-offset-6 bg-grey">du-col-offset-6</div>
    </div>
    <div class="du-row">
      <div class="du-col-6 du-col-offset-6 bg-grey">du-col-offset-6</div>
      <div class="du-col-6 du-col-offset-6 bg-grey">du-col-offset-6</div>
    </div>
    <div class="du-row">
      <div class="du-col-12 du-col-offset-6 bg-grey">du-col-offset-6</div>
    </div>
  </div>
  <h1>响应式布局</h1>
  <div>
    参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。
    .du-col-{响应尺寸}-*
  </div>
  <div class="demo">
    <div class="du-row">
      <div class="du-col-xs-8 du-col-sm-6 du-col-md-4 du-col-lg-3 du-col-xl-1 bg-grey">1</div>
      <div class="du-col-xs-4 du-col-sm-6 du-col-md-8 du-col-lg-9 du-col-xl-11 bg-grey">2</div>
      <div class="du-col-xs-4 du-col-sm-6 du-col-md-8 du-col-lg-9 du-col-xl-11 bg-grey">3</div>
      <div class="du-col-xs-8 du-col-sm-6 du-col-md-4 du-col-lg-3 du-col-xl-1 bg-grey">4</div>
    </div>
  </div>
  <h1>对齐</h1>
  <div>justify-center justify-around justify-between</div>
  <div class="demo">
    <div class="du-row justify-center">
      <div class="du-col-4 bg-grey">1</div>
      <div class="du-col-4 bg-grey">1</div>
      <div class="du-col-4 bg-grey">1</div>
    </div>
    <div class="du-row justify-around">
      <div class="du-col-4 bg-grey">1</div>
      <div class="du-col-4 bg-grey">1</div>
      <div class="du-col-4 bg-grey">1</div>
    </div>
    <div class="du-row justify-between">
      <div class="du-col-4 bg-grey">1</div>
      <div class="du-col-4 bg-grey">1</div>
      <div class="du-col-4 bg-grey">1</div>
    </div>
  </div>

  <h1>隐藏</h1>
  <div class="demo">
    <div class="du-row">
      <div class="du-col-6 bg-grey">1.hidden-xs-only - 当视口在 xs 尺寸时隐藏</div>
      <div class="du-col-6 bg-gray hidden-xs-only">1.hidden-xs-only</div>
    </div>
    <div class="du-row">
      <div class="du-col-6 bg-grey">2.hidden-sm-only - 当视口在 sm 尺寸时隐藏</div>
      <div class="du-col-6 bg-gray hidden-sm-only">2.hidden-sm-only</div>
    </div>
    <div class="du-row">
      <div class="du-col-6 bg-grey">3.hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏</div>
      <div class="du-col-6 bg-gray hidden-sm-and-down">3.hidden-sm-and-down</div>
    </div>
    <div class="du-row">
      <div class="du-col-6 bg-grey">4.hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏</div>
      <div class="du-col-6 bg-gray hidden-sm-and-up">4.hidden-sm-and-up</div>
    </div>
    <div class="du-row">
      <div class="du-col-6 bg-grey">5.hidden-md-only - 当视口在 md 尺寸时隐藏</div>
      <div class="du-col-6 bg-gray hidden-md-only">5.hidden-md-only</div>
    </div>
    <div class="du-row">
      <div class="du-col-6 bg-grey">6.hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏</div>
      <div class="du-col-6 bg-gray hidden-md-and-down">6.hidden-md-and-down</div>
    </div>
    <div class="du-row">
      <div class="du-col-6 bg-grey">7.hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏</div>
      <div class="du-col-6 bg-gray hidden-md-and-up">7.hidden-md-and-up</div>
    </div>
    <div class="du-row">
      <div class="du-col-6 bg-grey">8.hidden-lg-only - 当视口在 lg 尺寸时隐藏</div>
      <div class="du-col-6 bg-gray hidden-lg-only">8.hidden-lg-only</div>
    </div>
    <div class="du-row">
      <div class="du-col-6 bg-grey">9.hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏</div>
      <div class="du-col-6 bg-gray hidden-lg-and-down">9.hidden-lg-and-down</div>
    </div>
    <div class="du-row">
      <div class="du-col-6 bg-grey">10.hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏</div>
      <div class="du-col-6 bg-gray hidden-lg-and-up">10.hidden-lg-and-up</div>
    </div>
    <div class="du-row">
      <div class="du-col-6 bg-grey">11.hidden-xl-only - 当视口在 xl 尺寸时隐藏</div>
      <div class="du-col-6 bg-gray hidden-xl-only">11.hidden-xl-only</div>
    </div>
  </div>
</body>

</html>